<div class="btn-group d-none d-xl-inline" style="float:right;" id="note-format" data-toggle="buttons-radio">
  <a aria-label="Diplay grid-format" onClick="toggle_format('grid')" id="grid-format" class="btn btn-outline-secondary btn-sm active" href="#"><i style="font-size:14px;" class="fa fa-th-large"></i></a>
  <a aria-label="Diplay list-format" onClick="toggle_format('list')" id="list-format" class="btn btn-outline-secondary btn-sm" href="#"><i style="font-size:14px;" class="fa fa-list"></i></a>
</div>

<script>
  jQuery(document).ready(function () {
    if('displayFormat' in sessionStorage){
      toggle_format(sessionStorage.getItem('displayFormat'))
    }
  });

  (function(){
    toggle_format = function(format) {
      if (format == "grid") {
        <% if params[:controller] == 'questions' %>
        $('.questions-page').addClass('row')
        $('.card').css({ 'width' : '100%' })
        <% else %>
        $('.note').addClass('col-md-3')
        <% end %>
        $('.note .img-thumbnail').css('width','100%')
        $('.note hr.bottom').hide()
        $('#notes hr.hidden-sm').show()
        $('#notes ._row').addClass('row')
        $('#notes ._row').removeClass('_row')
        $('#notes._container-fluid').addClass('container-fluid')
        $('#notes._container-fluid').removeClass('_container-fluid')
        $('#grid-format').addClass('active')
        $('#list-format').removeClass('active')
      } else {
        <% if params[:controller] == 'questions' %>
        $('.questions-page').removeClass('row')
        $('.card').css({ 'width' : '60vw' })
        <% else %>
        $('.note').removeClass('col-md-3')
        <% end %>
        $('.note .img-thumbnail').css('width','30%')
        $('.note hr.bottom').show()
        $('#notes hr.hidden-sm').hide()
        $('#notes .row').addClass('_row')
        $('#notes .row').removeClass('row')
        $('#notes.container-fluid').addClass('_container-fluid')
        $('#notes.container-fluid').removeClass('container-fluid')
        $('#notes .note').removeClass('row-fluid')
        $('#list-format').addClass('active')
        $('#grid-format').removeClass('active')
      }
      sessionStorage.setItem('displayFormat', format)
    }
  })()
</script>
